<template>
  <div class="right-page" :="$attrs">
    <div class="top" v-if="selectDeptId">
      <div class="top-title">岗位设置</div>
      <div class="top-title-tip"
        >在岗位分配中，岗位人员不得超过<span style="font-weight: 600; color: #333">10</span
        >人。</div
      >
      <div class="top-table-title">
        <div class="label">部门名称</div>
        <div class="content">{{ selectDeptText }}</div>
      </div>
      <div class="top-table-row" v-for="(item, index) in postList" :key="item.postId">
        <div class="label">{{ item.postName }}</div>
        <div class="content">
          <div class="item" v-for="(user, userIndex) in item.userList" :key="user.userId">
            <span>{{ user.name }}</span>
            <div @click="deletePerson(index, userIndex)" v-if="authType != 'view'"
              ><img :src="closeImg"
            /></div>
          </div>
          <div
            class="add-btn"
            @click="addPerson(item)"
            v-show="authType != 'view' && item.userList.length < 10"
          >
            <div><img :src="addImg" /></div>
            <span>继续添加</span>
          </div>
        </div>
      </div>
    </div>
    <div class="not-choose-dept" v-else>请先选择左侧部门！</div>
    <div class="bottom">
      <a-button
        type="primary"
        @click="handleAllocation"
        :disabled="!selectDeptId"
        v-show="authType != 'view'"
        style="width: 120px"
      >
        确认
      </a-button>
      <a-button @click="handleBack" style="margin-left: 16px; width: 120px"> 返回 </a-button>
    </div>
  </div>
  <ChooseUserModal @register="registerModal" @success="handleSuccess" />
</template>

<script lang="ts" setup>
  import { ref, watch, nextTick } from 'vue';
  import closeImg from '/@/assets/images/close.png';
  import addImg from '/@/assets/images/add-select.png';
  import ChooseUserModal from './ChooseUserModal.vue';
  import { useModal } from '/@/components/Modal';
  import { getPostList } from '/@/api/admin/user';
  import { saveUserDeptPost } from '/@/api/admin/userDept';
  import { useMessage } from '/@/hooks/web/useMessage';

  const postList = ref<Array<any>>([]);
  const emit = defineEmits(['update:value']);

  let clickPostId = ref('');

  interface Props {
    selectDeptText: string;
    selectDeptId: string;
    selectDeptUserData: object;
    authType: string;
  }
  const props = defineProps<Props>();

  const [registerModal, { openModal, closeModal }] = useModal();

  const { createMessage, createConfirm } = useMessage();

  watch(
    () => props.selectDeptUserData,
    (val) => {
      Object.keys(val).forEach((item) => {
        const findIndex = postList.value.findIndex((postItem) => postItem.postId == item);
        if (findIndex > -1) {
          postList.value[findIndex].userList = val[item];
        }
      });
    },
  );

  function handleBack() {
    nextTick(() => {
      emit('update:value', false);
    });
  }

  function addPerson(item) {
    clickPostId.value = item.postId;
    openModal(true, {
      userList: item.userList,
    });
  }

  async function handleAllocation() {
    const params = {
      deptId: props.selectDeptId,
      postUsers: postList.value.map((item) => ({
        postId: item.postId,
        userIds: item.userList.map((user) => user.userId),
      })),
    };
    await saveUserDeptPost(params);
    createMessage.success('操作成功');
    emit('update:value', false);
  }

  function handleSuccess(val) {
    const findIndex = postList.value.findIndex((item) => item.postId == clickPostId.value);
    postList.value[findIndex].userList = val.map((item) => ({
      name: item.name,
      userId: item.userId,
    }));
    closeModal();
  }

  function deletePerson(index, userIndex) {
    createConfirm({
      iconType: 'warning',
      title: '删除提示',
      content: `是否确认删除该成员？`,
      onOk: async () => {
        postList.value[index].userList.splice(userIndex, 1);
      },
    });
  }

  async function getPostListOptions() {
    const data = await getPostList();
    postList.value = data.map((item) => ({
      ...item,
      userList: [],
    }));
  }
  getPostListOptions();

  defineExpose({
    postList,
  });
</script>

<style scoped lang="less">
  .right-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      background-color: #fcfcfc;
      padding: 16px;
      flex: 1;

      &-title {
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 700;
        color: #333333;

        &-tip {
          color: #999999;
          margin-bottom: 8px;
        }
      }

      &-table-row {
        display: flex;

        .label {
          width: 120px;
          padding: 28px 24px;
          font-weight: 600;
          border: 1px solid #e9e9e9;
          margin: 0 -1px -1px 0;
        }

        .content {
          flex: 1;
          border: 1px solid #e9e9e9;
          padding-left: 16px;
          margin: 0 -1px -1px 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .item,
          .add-btn {
            height: 32px;
            display: flex;
            align-items: center;
            border-radius: 2px 2px 2px 2px;
          }

          .item {
            margin-right: 16px;
            padding: 8px 8px 8px 12px;
            background-color: rgba(43, 99, 161, 0.05);

            span {
              margin-right: 16px;
            }

            img {
              cursor: pointer;
              width: 12px;
            }
          }

          .add-btn {
            padding: 8px 12px 8px 8px;
            cursor: pointer;
            user-select: none;
            border: 1px solid #2b63a1;

            span {
              margin-left: 6px;
              color: #2b63a1;
            }

            img {
              width: 20px;
            }
          }
        }
      }

      &-table-title {
        display: flex;
        padding: 20px 24px;
        color: #666666;
        background-color: #f1f4f7;

        .label {
          width: 120px;
        }

        .content {
          flex: 1;
        }
      }
    }

    .bottom {
      background-color: #fcfcfc;
      padding: 16px;
      margin-top: 2px;
    }

    .not-choose-dept {
      background-color: #fcfcfc;
      flex: 1;
      padding: 22px;
    }
  }
</style>
